import type { ActionType } from '@ant-design/pro-components';
import { ProForm, ProFormSelect, ProFormText, ProTable } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import type { Opinion, OpinionParams } from '@fill/client';
import { rspc } from '@fill/client';
import { Form } from 'antd';
import { QUESTION_ENUM } from '../../constants/default';
import { useOpinionDetail } from './Detail';

export default () => {
  const actionRef = useRef<ActionType>();
  const { columns, modalForm } = useOpinionDetail();
  const [params, setParams] = useState<{ arg: OpinionParams }>({
    arg: {
      content: null,
      slug: null,
      description: null,
      state: null,
      book_state: null,
      page: 1,
    },
  });

  const { data, isLoading } = rspc.useQuery(['opnions.get', params], {
    // enabled: false,
    keepPreviousData: true,
  });

  const [form] = Form.useForm<any>();

  return (
    <>
      <ProTable<Opinion>
        columns={columns}
        actionRef={actionRef}
        dataSource={data}
        loading={isLoading}
        // request={async (params) => {
        //   console.log(params);
        //   setParams({
        //     arg: {
        //       slug: (!!params.slug && params.slug) || null,
        //       description: (!!params.description && params.description) || null,
        //       content: (!!params.content && params.content) || null,
        //       state: null,
        //       book_state: null,
        //       page: 1,
        //     },
        //   });
        //   return {
        //     data: [],
        //     success: true,
        //   };
        // }}
        toolBarRender={() => [
          // eslint-disable-next-line react/jsx-key
          <ProForm<{
            slug: string
            description: string
            content: string
          }
          >
            form={form}
            layout="inline"
            submitter={{
              searchConfig: {
                submitText: '查询',
              },
              render(props, dom) {
                return dom.reverse();
              },
              onSubmit() {
                form.submit();
              },
              onReset() {
                form.resetFields();
                form.submit();
              },
            }}
            onFinish={async (params) => {
              console.log(params);
              setParams({
                arg: {
                  slug: (!!params.slug && params.slug) || null,
                  description: (!!params.description && params.description) || null,
                  content: (!!params.content && params.content) || null,
                  state: null,
                  book_state: null,
                  page: 1,
                },
              });
            }}
          >
            <ProFormSelect name="slug" placeholder="问题分类" width="sm" valueEnum={QUESTION_ENUM} />
            <ProFormText name="description" placeholder="问题方面" width="sm" />
            <ProFormText name="content" placeholder="具体问题" width="sm" />
          </ProForm>,
        ]}
        // columnsState={{
        //   persistenceKey: 'pro-table-singe-demos',
        //   persistenceType: 'localStorage',
        //   onChange(value) {
        //     console.log('value: ', value);
        //   },
        // }}
        rowKey="uuid"
        search={false}
        options={false}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: page => console.log(page),
        }}
        dateFormatter="string"
      />

      {modalForm}
    </>
  );
};
